<template>
    <div>
        <el-card class="box-card">
            <div style="margin-top: 25px">
                <el-row style="margin-bottom: 20px">
                    <el-col :span="24"><div class="grid-content bg-purple-dark">
                        <span style="font-size: 25px;">登录</span>
                    </div></el-col>
                </el-row>

                <el-row>
                    <el-col :span="7" class="labClass"><div class="grid-content bg-purple">
                        <span style="">用户名: </span>
                    </div></el-col>
                    <el-col :span="14"><div class="grid-content bg-purple-light">
                        <el-input v-model="username" placeholder="请输入用户名"></el-input>
                    </div></el-col>
                    <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
                        *
                    </div></el-col>
                </el-row>

                <p>
                    <el-row>
                        <el-col :span="7" class="labClass"><div class="grid-content bg-purple">
                            <span>用户密码: </span>
                        </div></el-col>
                        <el-col :span="14" ><div class="grid-content bg-purple-light">
                            <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
                        </div></el-col>
                        <el-col :span="3" class="labClass"><div class="grid-content bg-purple">
                            *
                        </div></el-col>
                    </el-row>
                </p>
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="success" @click="toRegister">注册</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                username:'',
                pwd:''
            }
        },
        methods:{
          login(){
              this.axios.get("/findAll/user/login",{
                  params:{
                      name:this.username,
                      pwd:this.pwd
                  }
              }).then(
                  r => {
                      console.log(r.data);
                      if (r.data == "no"){
                          this.$router.push("/register")
                      }else if (r.data == "ok") {
                          this.$router.push("/ticket")
                      }
                  }
              )
          },
          toRegister(){
              this.$router.push("/register")
            }
        }
    }
</script>

<style scoped>
    .labClass{
        margin-top: 15px;
    }
    .box-card{
        height: 270px;
        margin-top: 10%;
        margin-left: 30%;
        margin-right: 30%;
    }
</style>